<template>
  <div class="Box" style="height: 99.9%">
    <div style="margin: 1px 0 16px">
      <el-breadcrumb class="breadcrumb" separator="/">
        <el-breadcrumb-item class="breadcrumb_item" :to="{ path: '/' }">概况</el-breadcrumb-item>
        <el-breadcrumb-item class="breadcrumb_item" style="cursor: pointer"
          :to="{ path: '/Carrier/acceptCarriage/list' }">
          <span>承运货主</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item class="breadcrumb_item">
          <span class="fontColor">{{
            $route.query.ownerId ? "编辑货主" : "新增货主"
          }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--  <breadcrumb></breadcrumb> -->
    <div class="steps">
      <div class="step_item">
        <div class="rectangle" :class="{ active: this.current == 1 }"></div>
        <div class="triangle" :class="{ active: this.current == 1 }"></div>
        <span class="title" :class="{ active: this.current == 1 }">01.基本信息</span>
      </div>
      <div class="step_item">
        <div class="rectangle" :class="{ active: this.current == 2 }">
          <div class="triangle_bg"></div>
        </div>
        <div class="triangle" :class="{ active: this.current == 2 }"></div>

        <span class="title" :class="{ active: this.current == 2 }">02.合同信息</span>
      </div>
      <div class="step_item">
        <div class="rectangle" :class="{ active: this.current == 3 }">
          <div class="triangle_bg"></div>
        </div>
        <div class="triangle" :class="{ active: this.current == 3 }"></div>
        <span class="title" :class="{ active: this.current == 3 }">03.线路信息</span>
      </div>
    </div>

    <div class="main">
      <div class="main_item" v-show="this.current == 1" v-loading="loading">
        <!-- 企业信息 -->
        <div class="infoItem">
          <div class="infoTitle">
            <div class="beforeline"></div>
            <div class="tit">企业信息</div>
          </div>
          <el-form :model="enterpriseForm" :rules="enterpriseRules" status-icon ref="enterpriseForm" label-width="125px"
            class="input_form">
            <el-row :gutter="20">
              <el-col :span="16">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="货主代码" prop="supplierCode">
                      <el-input v-model="enterpriseForm.supplierCode"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="企业全称" prop="name">
                      <el-input v-model="enterpriseForm.name"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="统一社会信用代码" prop="taxpayerIdentificationNumber">
                      <el-input v-model="enterpriseForm.taxpayerIdentificationNumber"></el-input> </el-form-item></el-col>
                  <el-col :span="12">
                    <el-form-item label="企业简称" prop="abbreviation">
                      <el-input v-model="enterpriseForm.abbreviation"></el-input> </el-form-item></el-col>
                  <el-col :span="12">
                    <el-form-item label="法定代表人" prop="juridicalPerson">
                      <el-input v-model="enterpriseForm.juridicalPerson"></el-input> </el-form-item></el-col>
                  <el-col :span="12"></el-col>
                  <el-col :span="12">
                    <el-form-item label="推荐部门" prop="recommendDepartment">
                      <el-input v-model="enterpriseForm.recommendDepartment"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="8">
                <el-form-item label="营业执照" prop="businessLicenseFile">
                  <el-upload class="businessLicense_uploader" :action="url + '?ocrType=2'" :show-file-list="false"
                    v-loading="upLoading" :headers="headers" :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <el-image v-if="enterpriseForm.businessLicenseFile" class="businessLicensePic" :fit="'cover'"
                      :src="enterpriseForm.businessLicenseFile">
                      <!-- :preview-src-list="[enterpriseForm.businessLicenseFile]" -->
                    </el-image>
                    <div v-else class="uploadIconBox">
                      <div class="iconfontcolor icon-a-"></div>
                      <span class="text">上传图片</span>
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="width: 100%">
              <el-col :span="8">
                <el-form-item label="成立时间" prop="comCreateTime">
                  <el-date-picker class="data_picker" v-model="enterpriseForm.comCreateTime" type="date"
                    @change="dateChange($event)" placeholder="选择日期" :picker-options="pickerOptions0"
                    value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8"><el-form-item label="所属地区" prop="location" style="padding-left: 8px">
                  <!-- 绑定值为id数值,转换为字符串再手动装表单里 -->
                  <el-cascader :filter-method="filterMethod" class="zdy_cascader" ref="sysCascader" v-model="locationId"
                    :options="newCity" @change="locationChange($event)" placeholder="不限" clearable :filterable="true">
                  </el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="8"><el-form-item label="注册国家" prop="registeredCountry">
                  <el-input v-model="enterpriseForm.registeredCountry"></el-input> </el-form-item></el-col>
            </el-row>
            <el-row style="width: 100%">
              <el-col :span="16"><el-form-item label="注册地址" prop="comAddress">
                  <el-input v-model="enterpriseForm.comAddress"></el-input> </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="经营范围" prop="experienceRange">
                  <el-input v-model="enterpriseForm.experienceRange"></el-input> </el-form-item></el-col>
              <el-col :span="16">
                <el-form-item label="办公地址" prop="officeAddress">
                  <el-input v-model="enterpriseForm.officeAddress"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="注册资金(万元)" prop="registeredCapital" class="col_1">
                  <el-input v-model="enterpriseForm.registeredCapital"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="企业性质" prop="enterpriseNature">
                  <el-input v-model="enterpriseForm.enterpriseNature"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 财务信息 -->
        <div class="infoItem">
          <div class="infoTitle">
            <div class="beforeline"></div>
            <div class="tit">财务信息</div>
          </div>
          <el-form :model="financeForm" status-icon :rules="financeRules" ref="financeForm" label-width="117px"
            class="input_form">
            <el-row style="width: 100%">
              <el-col :span="8">
                <el-form-item label="收款人名称" prop="payeeAccountName">
                  <el-input v-model="financeForm.payeeAccountName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="开户行" prop="openingBank">
                  <el-input v-model="financeForm.openingBank"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="开户行账号" prop="bankAccountNumber">
                  <el-input v-model="financeForm.bankAccountNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="银行名称" prop="bankName">
                  <el-input v-model="financeForm.bankName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="支行名称" prop="subbranchName">
                  <el-input v-model="financeForm.subbranchName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="分行编码" prop="branchCode">
                  <el-input v-model="financeForm.branchCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="分行省市" prop="branchCities">
                  <el-input v-model="financeForm.branchCities"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 联系信息 -->
        <div class="infoItem">
          <div class="infoTitle">
            <div class="beforeline"></div>
            <div class="tit">联系信息</div>
          </div>
          <el-form status-icon :model="contactForm" :rules="contactRules" ref="contactForm" label-width="117px"
            class="input_form">
            <el-row style="width: 100%">
              <el-col :span="8">
                <el-form-item label="公司电话" prop="companyTel">
                  <el-input v-model="contactForm.companyTel"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系人" prop="headName">
                  <el-input v-model="contactForm.headName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="负责人电话" prop="headTel">
                  <el-input v-model="contactForm.headTel"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="负责人邮箱" prop="headMail">
                  <el-input v-model="contactForm.headMail"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="main_item" v-show="this.current == 2">
        <addContractInfo @cofime="cofime" :contractListVoList="getContractListVoList" ref="ChildContract">
        </addContractInfo>
      </div>
      <div class="main_item" v-show="this.current == 3">
        <routeInfo ref="ChildrouteInfo" :routeItemData="getRouteInfoData"></routeInfo>
      </div>
    </div>
    <div class="nextBox">
      <div class="goBack" @click="previousStep()" v-show="this.current > 1">
        <i class="el-icon-arrow-left"></i>
        <div class="text">返回上一步</div>
      </div>
      <div class="rightItem">
        <button class="notAdopt_btn" @click="$router.back()">取消</button>
        <div class="nextBtm" @click="nextStep()" :class="{ disable: loading }">
          {{ this.current == 3 ? "创建完成" : "下一步" }}
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import addContractInfo from "@/views/CargoOwner/subAddCargoOwner/addContractInfo.vue";
import routeInfo from "@/views/CargoOwner/subAddCargoOwner/routeInfo.vue";
import breadcrumb from "@/components/breadcrumb.vue";
import httpApi from "@/http";
import newCity from "@/common/newCity";
import BaseUrl from "@/http/BaseUrl";
export default {
  data() {
    let validatePass1 = (rule, value, callback) => {
      let params = {};
      if (this.$route.query.ownerId) {
        params = {
          supplierCode: this.enterpriseForm.supplierCode,
          ownerId: this.$route.query.ownerId,
        };
      } else if (!this.$route.query.ownerId) {
        params = {
          supplierCode: this.enterpriseForm.supplierCode,
        };
      }

      httpApi.cargoOwnerApi.formValidate(params).then((res) => {
        // console.log("校验", res);
        if (res.data.code == 200) {
          callback(); //通过不传值
        } else if (res.data.code == 202) {
          callback(new Error("已存在")); //callback()传了参数字段就代表校验不通过
        }
      });
    };
    let validatePass2 = (rule, value, callback) => {
      let params = {};
      if (this.$route.query.ownerId) {
        params = {
          name: this.enterpriseForm.name,
          ownerId: this.$route.query.ownerId,
        };
      } else if (!this.$route.query.ownerId) {
        params = {
          name: this.enterpriseForm.name,
        };
      }

      httpApi.cargoOwnerApi.formValidate(params).then((res) => {
        // console.log("校验", res);

        if (res.data.code == 200) {
          callback(); //通过不传值
        } else if (res.data.code == 202) {
          callback(new Error("已存在")); //callback()传了参数字段就代表校验不通过
        }
      });
    };
    let validatePass3 = (rule, value, callback) => {
      let params = {};
      if (this.$route.query.ownerId) {
        params = {
          abbreviation: this.enterpriseForm.abbreviation,
          ownerId: this.$route.query.ownerId,
        };
      } else if (!this.$route.query.ownerId) {
        params = {
          abbreviation: this.enterpriseForm.abbreviation,
        };
      }

      // console.log(params);
      httpApi.cargoOwnerApi.formValidate(params).then((res) => {
        // console.log("校验", res);

        if (res.data.code == 200) {
          callback(); //通过不传值
        } else if (res.data.code == 202) {
          callback(new Error("已存在")); //callback()传了参数字段就代表校验不通过
        }
      });
    };
    let validatePass4 = (rule, value, callback) => {
      let params = {};
      if (this.$route.query.ownerId) {
        params = {
          taxpayerIdentificationNumber:
            this.enterpriseForm.taxpayerIdentificationNumber,
          ownerId: this.$route.query.ownerId,
        };
      } else if (!this.$route.query.ownerId) {
        params = {
          taxpayerIdentificationNumber:
            this.enterpriseForm.taxpayerIdentificationNumber,
        };
      }

      httpApi.cargoOwnerApi.formValidate(params).then((res) => {
        // console.log("校验", res);
        if (res.data.code == 200) {
          callback(); //通过不传值
        } else if (res.data.code == 202) {
          callback(new Error("已存在")); //callback()传了参数字段就代表校验不通过
        }
      });
    };

    return {
      upLoading: false,
      loading: false,
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      current: 1, //1 默认为第一步 基本信息
      newCity: [],
      url: BaseUrl.UPLOADURL + "/file/upload",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      addRouteForm: {}, ///路线信息表单 存储子组件获取的数据
      getContractListVoList: [], //存放合同信息回填数据 传给子组件
      getRouteInfoData: [], //存放线路信息回填数据

      enterpriseForm: {
        enterpriseNature: "", //企业性质
        ownerFlag: "PLATFORM", //核心平台 ID码
        supplierCode: "", //供应商代码
        name: "", //企业全称
        businessLicenseFile: "", //营业执照
        abbreviation: "", //企业简称
        juridicalPerson: "", //法定代表人
        registeredCapital: "", //注册资金(万元
        recommendDepartment: "", //推荐部门
        taxpayerIdentificationNumber: "", //统一社会信用代码
        officeAddress: "", //办公地址
        comCreateTime: "", //成立时间
        experienceRange: "", //经营范围
        comAddress: "", //注册地址
        registeredCountry: "", //注册国家
        location: "",
        locationId: "",
      },



      enterpriseRules: {
        supplierCode: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            pattern: /^[A-Za-z][A-Za-z]\d{5}$/,
            message: "2位字母5位数字",
            trigger: "blur",
          },
          {
            required: true,
            message: "此供应商代码已存在",
            validator: validatePass1,
            trigger: "blur",
          },
        ],
        name: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            required: true,
            message: "该企业全称已存在",
            validator: validatePass2,
            trigger: "blur",
          },
        ],
        businessLicenseFile: [{ required: true, message: "请上传文件" }],
        abbreviation: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            required: true,
            message: "该企业简称已存在",
            validator: validatePass3,
            trigger: "blur",
          },
        ],
        juridicalPerson: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        registeredCapital: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        recommendDepartment: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        taxpayerIdentificationNumber: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            pattern:
              /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
            message: "社会信用代码格式不正确,需18位/15位老工商代码",
            trigger: "blur",
          },
          {
            required: true,
            message: "该统一社会信用代码已存在",
            validator: validatePass4,
            trigger: "blur",
          },
          //11421304691794718P  社会信用代码例子
        ],
        comCreateTime: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        experienceRange: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        comAddress: [{ required: true, message: "请输入", trigger: "blur" }],
        officeAddress: [{ required: true, message: "请输入", trigger: "blur" }],
        registeredCountry: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        location: [{ required: true, message: "请选择", trigger: "change" }],
        enterpriseNature: [
          { required: true, message: "请输入", trigger: "change" },
        ],
      },
      // financeForm表单
      financeForm: {
        payeeAccountName: "", //收款人账户
        openingBank: "", //开户行
        bankAccountNumber: "", //开户行账户
        bankName: "", //银行名称
        subbranchName: "", //支行名称
        branchCode: "", //分行编码
        branchCities: "", //分行省市
      },

      financeRules: {
        // payeeAccountName: [
        //   { required: true, message: "请输入", trigger: "blur" },
        // ],
        // openingBank: [{ required: true, message: "请输入", trigger: "blur" }],
        bankAccountNumber: [
          // { required: true, message: "请输入", trigger: "blur" },
          {
            pattern: /^\d{1,30}$/,
            message: "账户格式不正确",
            trigger: "blur",
          },
        ],
        // bankName: [{ required: true, message: "请输入", trigger: "blur" }],
        // subbranchName: [{ required: true, message: "请选择", trigger: "blur" }],
        // branchCode: [{ message: "请输入", trigger: "blur" }],
        // branchCities: [{ message: "请选择省份/城市", trigger: "blur" }],
      },
      //contactForm表单
      contactForm: {
        companyTel: "", //公司电话
        headName: "", //负责人姓名
        headTel: "", //负责人电话
        headMail: "", //负责人邮箱
      },
      /*  contactForm: {
         companyTel: "", //公司电话
         headName: "", //负责人姓名
         headTel: "", //负责人电话
         headMail: "", //负责人邮箱
       }, */
      contactRules: {
        companyTel: [
          { message: "请输入", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式不正确",
            trigger: "blur",
          },
        ],
        headName: [{ required: true, message: "请输入", trigger: "blur" }],
        headTel: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式不正确",
            trigger: "blur",
          },
        ],
        /*  */
        headMail: [
          // { required: true, message: "请输入", trigger: "blur" },
          // 只允许英文字母、数字、下划线、英文句号、以及中划线组成
          {
            pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/,
            message: "邮箱格式不正确",
            trigger: "blur",
          },
        ],
      },

      locationId: [], //存放地区id

      // 表单是否通过 判断令牌
      isTrueEnterpriseForm: false,
      isTrueFinanceForm: false,
      isTrueContactForm: false,

      isTrueContract: false, //合同信息判断令牌
      isTrueRoute: false, //路线信息判断令牌

      cargoOwnerInfo: {}, //存放总的表单数据

      //存放 需要判断已存在的数据,在编辑时排除该数据的校验情况
    };
  },
  methods: {
    cofime(contractArray) {
      //res 为true代表验证通过
      this.cargoOwnerInfo.contractIds = []; //赋值且清空数组
      // console.log("父组件接受子组件的数据", contractArray);
      this.cargoOwnerInfo.contractIds = contractArray; // 存放 合同信息数组 数据
      // console.log("第二步完成后总form的数据", this.cargoOwnerInfo);
      // console.log("长度", this.cargoOwnerInfo.contractIds.length);
      if (this.cargoOwnerInfo.contractIds.length != 0) {
        this.isTrueContract = true;
      } else {
        this.isTrueContract = false;
      }
    },

    // 图片上传成功后
    handleAvatarSuccess(res, file) {
      // console.log("上传成功的文件", file);
      // console.log("上传成功的res", res);
      switch (res.code) {
        case 200:
          this.enterpriseForm.businessLicenseFile = res.data.url;
          this.$refs["enterpriseForm"].clearValidate("businessLicenseFile");
          var date = res.data.jsonObject;
          if (date != null) {
            this.enterpriseForm.name = date.companyName;
            this.enterpriseForm.taxpayerIdentificationNumber = date.creditCode;
            this.enterpriseForm.abbreviation = date.companyName;
            this.enterpriseForm.juridicalPerson = date.legalPerson;
            this.enterpriseForm.comCreateTime = date.RegistrationDate.replace('年', '-').replace('月', '-').replace('日', '-');
            this.enterpriseForm.comAddress = date.businessAddress;
            this.enterpriseForm.experienceRange = date.businessScope;
            this.enterpriseForm.officeAddress = date.businessAddress;
            this.enterpriseForm.registeredCapital = date.registeredCapital.split("万")[0];
          }
          break;
        case 500:
          this.$message({
            type: "error",
            message: "上传图片失败,500服务器错误",
          });
          this.upLoading = false

          break

      }

      // console.log(this.enterpriseForm.businessLicenseFile);
    },
    // 文件上传之前判断文件格式及大小
    beforeAvatarUpload(file) {
      // console.log("文件格式", file);
      if (this.upLoading) {
        this.$message.warning('正在上传图片')
        return
      }
      this.upLoading = true
      const isJPG = file.type === "image/jpeg";
      const isPng = file.type === "image/png";
      const isJpeg = file.type === "image/jpeg";
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isJPG && !isPng && !isJpeg) {
        this.$message.error("上传营业执照图片只能是 JPG/png/jpeg 格式!");
        return false;
      }
      if (!isLt5M) {
        this.$message.error("上传营业执照图片不能超过 5MB!");
        return false;
      }
      if (!((isJPG || isPng || isJpeg) && isLt5M)) {
        this.upLoading = false
      }
      // console.log("条件", (isJPG || isPng || isJpeg) && isLt2M);
      return (isJPG || isPng || isJpeg) && isLt5M;
    },
    // 验证 
    yanzhen() {
      this.loading = true;
      this.$refs["enterpriseForm"].validate((valid) => {
        if (valid) {
          this.isTrueEnterpriseForm = true;

          this.$refs["financeForm"].validate((valid) => {
            if (valid) {
              this.isTrueFinanceForm = true;

              this.$refs["contactForm"].validate((valid) => {
                if (valid) {
                  this.isTrueContactForm = true;
                  // 3个令牌都为true 合并表单数据
                  //// console.log(this.isTrueEnterpriseForm == true && this.isTrueFinanceForm == true && this.isTrueContactForm == true);
                  if (
                    this.isTrueEnterpriseForm == true &&
                    this.isTrueFinanceForm == true &&
                    this.isTrueContactForm == true
                  ) {
                    let obj1 = JSON.parse(JSON.stringify(this.enterpriseForm));
                    let obj2 = JSON.parse(JSON.stringify(this.financeForm));
                    let obj3 = JSON.parse(JSON.stringify(this.contactForm));
                    Object.assign(this.cargoOwnerInfo, obj1, obj2, obj3);

                    // console.log("总的form", this.cargoOwnerInfo);

                    this.$message.success("OK");
                    this.loading = false;
                    this.current += 1;
                  }
                } else {
                  // console.log("error submit!!");
                  this.$message.error("请填写完整的信息");
                  this.isTrueContactForm = false;
                  this.loading = false;
                  return false;
                }
              });
            } else {
              this.isTrueFinanceForm = false;
              this.loading = false;
              this.$message.error("请填写完整的信息");
              return false;
            }
          });
        } else {
          this.$message.error("请填写完整的信息");
          this.loading = false;
          this.isTrueEnterpriseForm = false;
          return false;
        }
      });
    },
    nextStep() {
      if (this.current == 1) {
        //进行第一步的校验
        //Basic:['enterpriseForm','financeForm','contactForm'],
        this.yanzhen();
        if (this.$route.query.ownerId) {
          // console.log("查看子组件的方法", this.$refs.ChildContract);
          this.$refs.ChildContract.getBackfilling();
        }
      } else if (this.current == 2) {
        //合同信息校验
        // console.log("第二步校验令牌", this.isTrueContract);

        // console.log("查看子组件的方法", this.$refs.ChildrouteInfo);
        this.$refs.ChildrouteInfo.getRouteItemData();

        if (this.isTrueContract) {
          this.current += 1;
        } else {
          this.$message.error("请填写完数据");
        }
      } else if (this.current == 3) {
        //线路信息

        this.cargoOwnerInfo.lineIds = [];
        let itemArr = this.$refs["ChildrouteInfo"].addRouteForm.routeItem;

        if (itemArr.length > 0) {
          itemArr.forEach((item, i) => {
            if (item.lineName) {
              this.cargoOwnerInfo.lineIds.push({
                lineName: item.lineName,
                lineAddressDtos: [],
              });
              item.departurePlaceTable.forEach((mth, k) => {
                this.cargoOwnerInfo.lineIds[i].lineAddressDtos.push(mth);
              });
              item.destinationPlaceTable.forEach((mths, z) => {
                this.cargoOwnerInfo.lineIds[i].lineAddressDtos.push(mths);
              });
            }
          });
          // console.log("线路数据格式转换后!", this.cargoOwnerInfo.lineIds);
          if (this.cargoOwnerInfo.lineIds.length > 0) {
            this.cargoOwnerInfo.lineIds.forEach((item) => {
              item.lineAddressDtos.forEach((term, i) => {
                /* "name": "保利国际",
                  "addressType": "0",
                  "address": "重庆市,渝中区,昆仑大道",
                  "detail":"",
                  "contact": "联系人1",
                  "phone": "13140369947",
                  "lng": "123",
                  "lat": "123" */
                // console.log(term, "tt");
                for (let key in term) {
                  //key为在遍历对象中的每一个属性的属性名  term[key]为在遍历对象中的每一个key属性名对应的属性值 term为被遍历的对象
                  delete term.name;
                  delete term.remark;
                  delete term.tags;
                  delete term.updateBy;

                  //console.log(term[key]);
                  if (term[key] == "") {
                    // console.log("属性" + key + "为" + term[key]);
                    this.isTrueRoute = false;
                    this.$message.error("请填写线路完整信息");
                    return;
                  } else {
                    this.isTrueRoute = true;
                  }
                }
              });
            });
          } else {
            this.isTrueRoute = true;
          }
        } else {
          this.isTrueRoute = true;
        }

        // console.log("总表单传参", this.cargoOwnerInfo);
        if (
          this.$route.query.ownerId &&
          this.isTrueRoute &&
          this.isTrueContactForm
        ) {
          this.cargoOwnerInfo.ownerId = this.$route.query.ownerId;
          httpApi.cargoOwnerApi
            .emitCargoOwner(this.cargoOwnerInfo)
            .then((res) => {
              // console.log("新增结果", res);
              if (res.data.code == 200) {
                this.$message.success("编辑成功");
                sessionStorage.removeItem('BasicForm')
                this.$router.go(-1);
              }
            });
        } else if (this.isTrueRoute && this.isTrueContactForm) {
          httpApi.cargoOwnerApi
            .addCargoOwner(this.cargoOwnerInfo)
            .then((res) => {
              // console.log("新增结果", res);
              if (res.data.code == 200) {
                sessionStorage.removeItem('BasicForm')
                this.$message.success("新增成功");
                this.$router.go(-1);
              }
            });
        }
      }
    },
    previousStep() {
      this.current = this.current - 1;
    },
    // 地区选择
    locationChange(val) {
      // console.log(val);
      // 把得到的数组转为字符传
      if (val.length != 0) {
        this.location = val;
        // getNodeByValue	获取选中的节点信息

        // this.$refs.sysCascader.getCheckedNodes()[0]这方法手动点击级联选择器 可以获取节点信息, 搜索选取的 拿不到节点信息

        var labelArr =
          this.$refs["sysCascader"].panel.getNodeByValue(val).pathLabels;

        //// console.log('getNodeByValue',labelArr);

        let idArr = this.$refs["sysCascader"].panel.getNodeByValue(val).path;
        this.enterpriseForm.locationId = idArr.join(",");
        this.enterpriseForm.location = labelArr.join("/");

        // console.log("loaction", this.enterpriseForm.location);
      } else if (val.length == 0) {
        this.enterpriseForm.location = "";
        // // console.log('清空',this.enterpriseForm.location);
      }
    },
    // 搜索地区时,
    filterMethod(node, keyword) {
      if (node.text.indexOf(keyword) != -1) {
        // console.log("node", node);
        return node.label;
      }
      //// console.log('keyword',keyword);
    },
    // 编辑 获取货主数据回填表单
    getEditData() {
      // console.log(this.$route.query.ownerId);
      let params = {
        ownerId: this.$route.query.ownerId,
      };
      httpApi.cargoOwnerApi.getOwnerUpdateDetails(params).then((res) => {
        // console.log("货主全部数据", res);

        /* {
        "contractingPartyId": "1030044657750511616",
        "contractingPartyType": "CARGO_OWNER",
        "contractNumber": "123",
        "projectName": "项目名1",
        "contractName": "合同名1",
        "charging": 213,
        "chargingUnit": "",
        "settlementPeriod": 100,
        "settlementPeriodUnit": "月",
        "invoiceType": "电子发票",
        "taxRate": 9,
        "contractPeriod": 360,
        "contractPeriodUnit": "3",
        "earnestMoney": 9000,
        "contractStartTime": null,
        "contractEndTime": null,
        "contractRemarks": "备注123213",
        "signImage": "http://120.46.147.246:7030/test/2023/06/09/0074bxMmly1gvikqct9h9j30u00u0wfl_20230609090448A116.jpg",
        "createBy": "admin",
        "createTime": "2023-06-09 09:09:44",
        "updateBy": null,
        "updateTime": null
      } */
        this.enterpriseForm = {
          ownerFlag: "PLATFORM",
          supplierCode: res.data.data.supplierCode, //供应商代码
          name: res.data.data.name, //企业全称
          businessLicenseFile: res.data.data.businessLicenseFile, //营业执照
          abbreviation: res.data.data.abbreviation, //企业简称
          juridicalPerson: res.data.data.juridicalPerson, //法定代表人
          registeredCapital: res.data.data.registeredCapital, //注册资金(万元
          recommendDepartment: res.data.data.recommendDepartment, //推荐部门
          taxpayerIdentificationNumber:
            res.data.data.taxpayerIdentificationNumber, //统一社会信用代码
          officeAddress: res.data.data.officeAddress, //办公地址
          comCreateTime: res.data.data.comCreateTime, //成立时间
          experienceRange: res.data.data.experienceRange, //经营范围
          comAddress: res.data.data.comAddress, //注册地址
          registeredCountry: res.data.data.registeredCountry, //注册国家
          location: res.data.data.location,
          enterpriseNature: res.data.data.enterpriseNature,
          locationId: res.data.data.locationId,
        };

        this.locationId = res.data.data.locationId.split(","); //单独存数组 所数地区

        this.financeForm = {
          payeeAccountName: res.data.data.payeeAccountName, //收款人账户
          openingBank: res.data.data.openingBank, //开户行
          bankAccountNumber: res.data.data.bankAccountNumber, //开户行账户
          bankName: res.data.data.bankName, //银行名称
          subbranchName: res.data.data.subbranchName, //支行名称
          branchCode: res.data.data.branchCode, //分行编码
          branchCities: res.data.data.branchCities, //分行省市
        };
        this.contactForm = {
          companyTel: res.data.data.companyTel, //公司电话
          headName: res.data.data.headName, //负责人姓名
          headTel: res.data.data.headTel, //负责人电话
          headMail: res.data.data.headMail, //负责人邮箱
        };

        this.getContractListVoList = res.data.data.contractIds;
        // console.log("合同信息回填数据", this.getContractListVoList);
        //如果有合同信息,在修改之前,将历史合同信息回填到总表单  //以防止用户在该步骤 未修改任何数据直接下一步
        if (this.getContractListVoList.length != 0) {
          this.cargoOwnerInfo.contractIds = res.data.data.contractIds;
          // console.log("在修改之前,将历史合同信息回填到总表单",this.contractIds);
          this.isTrueContract = true;
        } else if (this.getContractListVoList.length == 0) {
          this.isTrueContract = false;
        }
        res.data.data.lineIds;

        this.getRouteInfoData = res.data.data.lineIds;
        //如果有历史信息 在修改之前,将历史合同信息回填总表单    //以防止用户在该步骤 未修改任何数据直接创建提交

        if (res.data.data.lineIds != 0) {
          this.cargoOwnerInfo.lineIds = res.data.data.lineIds;
          // console.log("在修改之前,将历史路线信息回填总表单", this.lineIds);
          this.isTrueContract = true;
        } else if (this.getContractListVoList.length == 0) {
          this.isTrueContract = false;
        }
      });
    },
    dateChange(val) {
      // console.log(val);
    },

  },
  mounted() {
    this.newCity = newCity; //存储城市数组
    // console.log(this.$route.query.ownerId);
    if (this.$route.query.ownerId) {
      this.getEditData();
    }
  },
  // created() {
  //   if (this.$route.query.ownerId) {//编辑时
  //     sessionStorage.setItem('BasicForm', '读取编辑')

  //   } else if(this.$route.query.ownerId==undefined){//新增时
  //     let BasicForm = JSON.parse(sessionStorage.getItem('BasicForm'))
  //     this.enterpriseForm = BasicForm.enterpriseForm
  //     this.financeForm = BasicForm.financeForm
  //     this.contactForm = BasicForm.contactForm
  //     this.locationId = BasicForm.enterpriseForm.locationId.split(",");
  //     sessionStorage.setItem('BasicForm', '新增')
  //   }


  // },
  // beforeDestroy() {
  //   //销毁
  //   sessionStorage.setItem('xiaohui', this.$route.query.ownerId)
  //   if (this.$route.query.ownerId) {//编辑时
  //     sessionStorage.setItem('BasicForm', '编辑数据存放')
  //   }
  //   /*  else if(this.$route.query.ownerId==undefined){//新增时
  //     let BasicForm = {
  //       enterpriseForm: this.enterpriseForm,
  //       financeForm: this.financeForm,
  //       contactForm: this.contactForm,
  //     }
  //     sessionStorage.setItem('BasicForm', JSON.stringify(BasicForm))
  //   } */

  // },
  components: {
    breadcrumb,
    addContractInfo,
    routeInfo,
  },
};
</script>

<style lang="scss" scoped>
.steps {
  height: 48.2px;
  width: 100%;
  background-color: #fff;
  display: flex;
  margin-bottom: 16px;

  >.step_item {
    width: calc(100% / 3);
    height: 48.2px;
    display: flex;
    position: relative;
    overflow: hidden;
    background-color: #f5f5f5;

    .rectangle {
      flex: 1;
      background-color: #fff;
      height: 48.2px;
      position: relative;
      z-index: 60;
      cursor: pointer;

      &.active {
        background-color: #1890ff;
      }

      >.triangle_bg {
        height: 39.6px;
        width: 39.6px;
        transform: rotate(45deg);
        display: inline-block;
        background-color: #f5f5f5;
        top: 4px;
        position: absolute;
        left: -22px;
      }
    }

    .triangle {
      cursor: pointer;
      height: 39.6px;
      width: 39.6px;
      transform: rotate(45deg);
      display: inline-block;
      background-color: #fff;

      position: relative;
      top: 4px;
      right: 16px;
      z-index: 100;

      &.active {
        background-color: #1890ff;
      }
    }

    .title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #262626;
      font-size: 12px;
      z-index: 200;
      cursor: pointer;

      &.active {
        color: #fff;
      }
    }
  }
}

.main {
  width: 100%;
  height: calc(100vh - 235px);
  overflow-y: scroll;

  // 验证反馈图标颜色
  ::v-deep .el-form-item.is-error .el-input__validateIcon {
    color: #f56c6c;
  }

  ::v-deep .el-input__validateIcon {
    color: #1890ff;
  }

  .main_item {
    background-color: #fff;
    padding: 28px 24px 0px;

    .infoItem {
      .businessLicensePic {
        width: 100%;
        height: 144px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }

      .infoTitle {
        background-color: #f8f8f8;
        height: 40px;
        display: flex;
        align-items: center;

        .beforeline {
          height: 14px;
          width: 3px;
          display: inline-block;
          background-color: #1890ff;
          margin-left: 12px;
          margin-right: 6px;
        }

        >.tit {
          color: #262626;
          font-size: 13px;
          font-weight: bold;
        }
      }

      .input_form {
        //height: 396px;
        padding: 28px 0 56px 0px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        ::v-deep .el-form-item__label {
          line-height: 32px;
          font-size: 12px;
          color: #262626;
          padding-top: 4px;
        }

        ::v-deep .el-input__inner {
          line-height: 32px;
          height: 32px;
        }

        .businessLicense_uploader {
          flex: 1;
          max-width: 240px;
          height: 144px;
          background-color: #f5f5f5;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;

          ::v-deep .el-upload {
            width: 100%;
            height: 100%;
          }

          .uploadIconBox {
            flex: 1;
            max-width: 240px;
            height: 144px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .icon-a- {
              font-size: 28.7px;
            }

            >.text {
              color: #1890ff;
              font-size: 12px;
              line-height: 0px;
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
}

.Box {
  position: relative;
  width: 100%;
  height: 100%;
}

.nextBox {
  height: 60px;
  width: calc(100% + 32px);
  background-color: #fff;
  position: absolute;
  bottom: -16px;
  left: -16px;
  display: flex;
  align-items: center;

  .goBack {
    display: flex;
    align-items: center;
    margin-left: 16px;
    cursor: pointer;
    transition: 0.2s;

    &:hover {
      opacity: 0.8;
    }

    >.el-icon-arrow-left {
      font-size: 13px;
      color: #1890ff;
    }

    >.text {
      color: #1890ff;
      font-size: 12px;
    }
  }

  .rightItem {
    margin-left: auto;
    display: flex;
    align-items: center;

    .notAdopt_btn {
      border-radius: 4px;
      border: 1px solid #d9d9d9;
      height: 36px;
      width: 80px;
      color: #262626;
      font-size: 12px;
      background-color: #fff;
      margin-right: 14px;
      cursor: pointer;
      transition: 0.2s;

      &:hover {
        opacity: 0.8;
        color: #1890ff;
        transition: 0.2s;
        border: 1px solid #1890ff;
      }
    }



    .nextBtm {
      background-color: #1890ff;
      color: #fff;
      font-size: 14px;
      line-height: 60px;
      text-align: center;
      width: 160px;
      height: 60px;
      margin-left: auto;
      cursor: pointer;
      transition: 0.2s;
      position: relative;





      &:hover {
        opacity: 0.8;
      }
    }

  }
}

.data_picker {
  width: calc(100% - 15px) !important;
}

.zdy_cascader {
  width: calc(100% - 5px) !important;
}
</style>

<style lang="scss" scoped>
.breadcrumb {
  min-width: 600px;

  ::v-deep .el-breadcrumb__inner {
    color: #c3c3c3;
    font-size: 12px;
    font-weight: normal;
  }

  ::v-deep .el-breadcrumb__separator {
    margin-left: 8px;
    margin-right: 7px;
  }

  .fontColor {
    color: #262626;
  }
}
</style>
